<template>
  <div style="padding:30px;">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.People" placeholder="人物ID" clearable />
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button type="primary" @click="addOrUpdateHandle(undefined)">新增</el-button>
        <el-button type="danger" :disabled="dataListSelections.length <= 0" @click="deleteHandle()">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
        v-loading="dataListLoading"
        :data="dataList.value"
        border
        style="width: 100%;"
        @selection-change="selectionChangeHandle"
    >
      <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
      />
      <el-table-column
          prop="ID"
          header-align="center"
          align="center"
          label="ID"
          width="170px"
      />
      <el-table-column
          prop="People"
          header-align="center"
          align="center"
          label="人员ID"
          width="170px"
      />
      <el-table-column
          prop="Title"
          header-align="center"
          align="center"
          label="事迹名称"
          width="170px"
      />
      <el-table-column
          prop="EventTime"
          header-align="center"
          align="center"
          label="发生时间"
          width="170px"
      />
      <el-table-column
          prop="Content"
          header-align="center"
          align="center"
          label="事迹详细"
      />
      <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作"
      >
        <template #default="scope">
          <el-button link size="small" @click="addOrUpdateHandle(scope.row.ID)">修改</el-button>
          <el-button link size="small" @click="deleteHandle(scope.row.ID)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-or-update v-if="addOrUpdateVisible" @refreshDataList="getDataList" ref="addOrUpdate" />
  </div>
</template>
<script setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import http from "../../utils/request";
import AddOrUpdate from "./add-or-update.vue";
import request from "../../utils/request";
import {ElMessage} from "element-plus";
const addOrUpdate = ref()

const dataForm = reactive({
  People:''
})
const dataList = reactive([{}])
let pageIndex = ref(1)
let pageSize = ref(10)
let totalPage = ref(0)

let dataListLoading = ref(false)
let addOrUpdateVisible= ref(true)
const dataListSelections= ref([])

onMounted(()=>{
  getDataList()
})

const getDataList = () =>{
  http.get(`/event/page?People=${dataForm.People}`).then((data)=>{
    dataList.value = data.data.list
  })
}

//每页数
const sizeChangeHandle = (val) =>{
  pageSize.value = val
  pageIndex.value = 1
  getDataList()
}
//当前页
const currentChangeHandle = (val) =>{
  pageIndex.value = val
  getDataList()
}
//多选
const selectionChangeHandle = (val) => {
  dataListSelections.value = val
}
//新增|修改
const addOrUpdateHandle = (id)=>{
  addOrUpdateVisible.value = true
  nextTick(()=>{
    addOrUpdate.value.init(id)
  })
}
//删除
const deleteHandle = (ID)=>{
  var ids = ID ? [ID] : dataListSelections.value.map(item => {
    return item.ID
  })
  request.post(`/event/delete`,{
    Ids:ids
  }).then((data) =>{
    if (data && data.code === 0){
      ElMessage({
        message:"操作成功",
        type:"success",
        duration:1500,
        onClose:() =>{
          getDataList()
        }
      })
    }else {
      ElMessage.error(data.message)
    }
  })
}

</script>
